<template>
  <div :style="{ left: element.x + 'px', top: element.y + 'px' }" class="bpmn-element" @click="selectElement">
    <div :class="element.type" class="bpmn-type">{{ element.name }}</div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  element: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(['select']);

// 选择元素
const selectElement = () => {
  emit('select', props.element);
};
</script>

<style scoped>
.bpmn-element {
  position: absolute;
  cursor: pointer;
}

.task {
  background-color: blue;
  color: white;
  padding: 10px;
  width: 100px;
  height: 50px;
  text-align: center;
}

.event {
  background-color: green;
  color: white;
  padding: 10px;
  width: 100px;
  height: 50px;
  text-align: center;
}

.gateway {
  background-color: orange;
  color: white;
  padding: 10px;
  width: 100px;
  height: 50px;
  text-align: center;
}
</style>
